<template>
  <div class="container">
    <div class="map-container">
      <button @click="back" class="close-back">返回</button>
      <div id="mapChart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";

const provinces = [
  "hainan", "sichuan", "guizhou", "yunnan", "xizang",
  "shanxi1", "gansu", "qinghai", "ningxia", "xinjiang",
  "beijing", "tianjin", "chongqing", "xianggang", "aomen", "taiwan"
];
const provincesText = [
  "海南省", "四川省", "贵州省", "云南", "西藏自治区",
  "陕西省", "甘肃省", "青海省", "宁夏回族自治区", "新疆维吾尔自治区",
  "北京市", "天津市", "重庆市", "香港", "澳门", "台湾"
];

// const mapCenter = [103.289603, 35.2544921875];
const borderColor = "#e6e8ed";
const chinaColor = "#7fa0dd";
const worldColor = "rgba(191, 210, 245, 0.5)";
const hoverColor = "rgba(109, 116, 172, 0.3)";
const textColor = "#243a4e";
const hoverTextColor = "#000";


export default {
  name: "ScreenMap",
  data() {
    return {};
  },
  mounted() {
    this.initMap();
  },
  methods: {
    back() {
      this.initMap();
    },
    initMap() {
      let mychart = echarts.init(document.getElementById("mapChart"));
      let backBtn = document.querySelector(".close-back");
      backBtn.style.display = "none";
      let selected = "world";
      drawMap(selected);

      mychart.on("click", function (param) {
        for (let i = 0; i < provincesText.length; i++) {
          if (param.name.includes(provincesText[i])) {
            backBtn.style.display = "block";
            drawMap(provinces[i]);
            break;
          }
        }
      });

      mychart.on("georoam", function () {
        let zoomLevel = mychart.getOption().geo[0].zoom;
        mychart.setOption({
          geo: {
            label: {
              show: zoomLevel >= 3,
            },
          },
        });
      });

      function drawMap(name) {
        let mapJson = name === "world"
            ? require("@/assets/json/world.json")
            : require("@/assets/json/province/" + name + ".json");

        echarts.registerMap(name, mapJson);
        // 通过请求访问

        // 风险数据（可替换为数据库数据）

        const riskData = [
          { name: "北京市", riskLevel: 1, companyCount: 100 },
          { name: "上海市", riskLevel: 3, companyCount: 300 },
          { name: "广东省", riskLevel: 5, companyCount: 500 },
          { name: "四川省", riskLevel: 2, companyCount: 150 },
          { name: "成都市", riskLevel: 1, companyCount: 150 },
          { name: "浙江省", riskLevel: 4, companyCount: 400 },
          { name: "成都市", riskLevel: 4, companyCount: 400 },
          { name: "Iran", riskLevel: 3, companyCount: 400 },
          { name: "Mongolia", riskLevel: 2, companyCount: 600 },
        ];


        let newCenter = name === "world" ?[105.0, 35.0] : mapJson.center; // 统一的中心位置
        let newZoom = name === "world" ? 4.5 : 1; // 进入省份后放大一点
        let option = {
          animation: false,
          tooltip: {
            show: true,
            trigger: "item",
            formatter: function (params) {
              let riskItem = riskData.find(d => d.name === params.name);
              if (riskItem) {
                return `${params.name}<br>风险等级: ${riskItem.riskLevel}<br>公司数量: ${riskItem.companyCount}`;
              }
              return params.name;
            },
          },
          visualMap: {
            show: true,
            min: 1,
            max: 5,
            left: "left",
            top: "bottom",
            text: ["低风险", "高风险"],
            inRange: {
              color: ["#00FF00", "#FFFF00", "#FFA500", "#FF4500", "#FF0000"], // 从绿到红
            },
            calculable: true,
          },

          geo: {
            show: true,
            map: name,
            zoom: newZoom,
            center: newCenter,
            roam: true,
            label: {
              show: true,
              color: textColor,
              fontSize: 12,
              emphasis: {
                color: hoverTextColor,
              },
            },
            itemStyle: {
              normal: {
                borderColor: borderColor,
                borderWidth: 1,
                areaColor: name === "world" ? worldColor : chinaColor,
                shadowBlur: 2,
                shadowColor: chinaColor,
                shadowOffsetX: 2,
                shadowOffsetY: 2,
              },
              emphasis: {
                areaColor: hoverColor,
                borderColor: borderColor,
                borderWidth: 1,
              },
            },
          },
          series: [
            {
              type: "map",
              map: name,
              geoIndex: 0,
              selectedMode: false,  // 关闭选中状态，防止点击变色
              data: riskData.map(d => ({
                name: d.name,
                value: d.riskLevel, // 绑定风险等级
              })),
              emphasis: {
                itemStyle: {
                  areaColor: null,//防止点击后颜色变化
                },
              },
            },
          ],
        };

        mychart.setOption(option);
      }
    },
  },
};
</script>

<style lang="css" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#mapChart {
  width: 100%;
  height: 100%;
}
.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background-size: 100% 100%;
  background-color: #e3edfc;
}
.map-container {
  width: 100%;
  height: 100vh;
}
.close-back {
  position: absolute;
  top: 15px;
  right: 100px;
  z-index: 999;
  text-align: center;
  height: 2rem;
  line-height: 2rem;
  border-radius: 0.25rem;
  font-size: 14px;
  width: 120px;
  color: #1398eb;
  border: 1px solid #1398eb;
  background-color: transparent;
  display: none;
  cursor: pointer;
}
</style>
